<template>
  <el-card class="box-card person-info">
    <div slot="header" class="clearfix person-info__header">
      <span>个人信息</span>
    </div>
    <div class="person-info__context">
      <div class="text-center person-info__context__avatar">
        <userAvatar :user="user" />
      </div>
      <ul class="list-group list-group-striped person-info__context__list">
        <li
          class="list-group-item person-info__context__list-item"
          v-for="item in personInfoOpt"
          :key="`user-${item.dataKey}`"
        >
          <svg-icon :icon-class="item.iconClass" />
          <span>{{ item.label }}</span>
          <div
            class="pull-right person-info__context__list-item__data"
            v-if="item.filter"
            :title="item.filter(user)"
          >
            {{ item.filter(user) }}
          </div>
          <div
            class="pull-right person-info__context__list-item__data"
            v-else
            :title="user[item.dataKey]"
          >
            {{ user[item.dataKey] }}
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
import userAvatar from "./userAvatar";
import { personInfoOpt } from "./data";

export default {
  name: "personInfo",
  components: { userAvatar },
  props: {
    user: Object,
  },
  data() {
    return {
      personInfoOpt,
    };
  },
};
</script>

<style lang="scss" scoped>
.person-info {
  &__context {
    &__list-item {
      &__data {
        width: 160px;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 使用省略符号 */
        text-align: right;
        cursor: pointer;
      }
    }
  }
}
</style>
